<template>
  <div>
    <a-spin :spinning="confirmLoading">
      <div class="operate-page-content-inspect param-config-box"> 
        <div class="flex space-between h-57 align-center border-bottom pl-46 pr-20">
          <div> <b>{{ $t('menu.system:config') }}</b> </div>
          <div> 
            <a-button type="primary" ghost class="mr-10" @click="syncData">{{ $t('common.sync') }}</a-button>
            <a-space v-if="isEdit"> 
              <a-button  @click="toggleOpt(false)">{{ $t('common.cancel') }}</a-button>
              <a-button type="primary"  @click="updateConfig">{{ $t('common.save') }}</a-button>
            </a-space>
            <a-popover placement="top" :mouseEnterDelay="10" v-else>
              <template #content>
                <a-button type="primary" @click="goInspect">{{ $t('other.factoryType') }}</a-button>
              </template>
              <a-button ghost type="primary" @click="toggleOpt(true)">{{ $t('common.editor') }}</a-button>
            </a-popover>
          </div>
        </div> 
        <div class="operate-box">
          <div style="height: calc(100vh - 210px)">
            <a-tabs v-model:activeKey="activeKey" tab-position="left"  >
              <a-tab-pane v-for="(item, index) in tabList" :key="index" >
                <template #tab>
                  <a :href="`#${item.value}`">
                    {{item.label}}
                  </a>
                </template>
              </a-tab-pane>
            </a-tabs>
          </div>
          <div style="height: calc(100vh - 210px)">
            <div class="blue-line"><a name="1"></a>{{ $t('sysManage.hangSet') }}</div>
            <div>
              <span>{{ $t('other.emptyHangerBackToTheFilmStation') }}</span>
              <a-radio-group v-model:value="queryParam.backStationMethod">
                <a-radio v-for="(item, index) in typeList" :key="index" :value="item.value" :disabled="!isEdit">{{item.label}}</a-radio> 
              </a-radio-group>
            </div>
            <div>
              <span>{{ $t('other.emptyHangerRecyclingRules') }}</span>
              <a-radio-group v-model:value="queryParam.emptyHangerRecyclingRules">
                <a-radio v-for="(item, index) in ruleList" :key="index" :value="item.value" :disabled="!isEdit">{{item.label}}</a-radio> 
              </a-radio-group>
            </div> 
            <div>
              <span>{{ $t('sysManage.noLend') }}</span>
              <a-switch :checked="!Boolean(queryParam.noload)" :disabled="!isEdit" @change="(val) => {changeStatus(val, 'noload')}"/>
            </div> 
            <div>
              <span>{{ $t('sysManage.allowOver') }}</span>
              <a-switch :checked="Boolean(queryParam.exceedMoTotal)" :disabled="!isEdit"  @change="(val) => {changeStatusProduct(val, 'exceedMoTotal')}"/>
            </div> 
            <div>
              <span>{{ $t('other.rehangTheHanger') }}</span>
              <b class="font-normal">{{ $t('other.productionProcessesIsGreaterThanSrEqualTo') }}</b>
              <a-input-number :disabled="!isEdit"
                :precision="0"
                v-model:value="queryParam.rehangparcelMinProcessNo"
                :placeholder="$t('common.pleaseInput')"
                size="small"
                :min="0" 
              />{{ $t('other.when') }}，{{ $t('other.theHangerCanBeRehungStTheFilmHangingStation') }}
            </div> 
            <!-- <div>
              <span>挂片站出衣架达到计划数后停止出衣</span> 
              <a-switch :checked="!Boolean(queryParam.stopUndressing)" :disabled="!isEdit"  @change="(val) => {changeStatus(val, 'stopUndressing')}"/>
            </div>   -->
            <div class="blue-line pt-10"><a name="2"></a>{{ $t('other.roadmapAllocationStrategy') }}</div>
            <div>
              <span>{{ $t('sysManage.allotTactic') }}</span>
              <a-radio-group v-model:value="queryParam.hangerAllotPolicy" :disabled="!isEdit">
                <a-radio :value="1">{{ $t('sysManage.prorate') }}</a-radio>
                <a-radio :value="0">{{ $t('sysManage.lowinvent') }}</a-radio>
              </a-radio-group>
            </div>
            <div v-if="queryParam.hangerAllotPolicy == 0">
              <span></span>
              <b class="font-normal">{{ $t('sysManage.inventLess') }}</b>
              <a-input-number :disabled="!isEdit"
                :precision="0"
                v-model:value="queryParam.hangerMiniStock"
                :placeholder="$t('common.pleaseInput')"
                size="small"
                :min="1"
                :max="99"
              />{{ $t('sysManage.firseAllo') }}
            </div>

            <div v-if="showWebConfig">
              <div class="blue-line pt-10">{{ $t('sysManage.iotSet') }}</div>
              <div class="mt-20">
               <span> {{ $t('sysManage.iotSetIp') }}</span>
                <a-input :disabled="!isEdit"
                  v-model:value="queryParam.ihsIotCloudIp"
                  :placeholder="$t('common.pleaseInput')"
                  style="width: 198px"
                />
              </div>
              <div class="mt-20 mb-0">
                <span>{{ $t('sysManage.iotSetPort') }}</span>
                <a-input :disabled="!isEdit"
                  v-model:value="queryParam.ihsIotCloudPort"
                  :placeholder="$t('common.pleaseInput')"
                  style="width: 180px"
                />
              </div>
            </div>
            <div class="blue-line pt-10"><a name="3"></a>{{$t('other.reportConfiguration')}}</div>
            <div>
              <span>{{ $t('other.statisticalMethodsOfWages') }}</span>
              <a-radio-group v-model:value="queryParam.labourCostStatisticsType" :disabled="!isEdit">
                <a-radio :value="1">{{ $t('other.accordingToTheProductionHourlyWageStatistics') }}</a-radio>
                <a-radio :value="2">{{ $t('other.statisticsAreBasedOnFinalWages') }}</a-radio>
              </a-radio-group>
            </div>
            <!--<div>-->
            <!--  <span>合并工序统计</span> -->
            <!--  <a-radio-group v-model:value="queryParam.mergeProcessStatistics" :disabled="!isEdit">-->
            <!--    <a-radio :value="1">合并工序分开统计</a-radio> -->
            <!--    <a-radio :value="2">统计在合并工序上</a-radio> -->
            <!--  </a-radio-group>-->
            <!--</div>-->
            <div class="blue-line pt-10"><a name="4"></a>{{ $t('sysManage.kanbanSit') }}</div>
            <div>
              <span>{{ $t('sysManage.refreshTime') }}</span>
              <a-input-number :disabled="!isEdit"
                :precision="0"
                size="small"
                v-model:value="queryParam.dataRefreshTime"
                :placeholder="$t('common.pleaseInput')"
                :min="10"
              />{{ $t('other.seconds') }}
              <b class="text-gray2 font-normal">({{ $t('sysManage.min10s') }})</b>
            </div>
            <div>
              <span>{{ $t('sysManage.carouselTime') }}</span>
              <a-input-number :disabled="!isEdit"
                :precision="0"
                size="small"
                v-model:value="queryParam.rotationSwitchingTime"
                :placeholder="$t('common.pleaseInput')"
                :min="10"
                :max="99"
              />{{ $t('other.seconds') }}
             <b class="text-gray2 font-normal">({{ $t('sysManage.min10s') }})</b>
            </div> 
            <div class="blue-line pt-10"><a name="5"></a>{{ $t('sysManage.lightTips3') }} </div>
            <div>
              <span>{{ $t('other.enableOrNot') }}</span>
              <a-switch :disabled="!isEdit" :checked="!Boolean(queryParam.threeColorLightTip)" @change="(val) => {changeStatus(val, 'threeColorLightTip')}" />
              <b class="text-gray2 font-normal ml-10">{{ $t('sysManage.green') }}-{{ $t('sysManage.normal') }}，{{ $t('sysManage.orange') }}-{{ $t('sysManage.fullStation') }}，{{ $t('sysManage.red') }}-{{ $t('sysManage.stopLine') }}</b>
            </div> 
            <div class="blue-line pt-10"><a name="6"></a>巡检配置</div>
            <div>
              <span>是否启用</span>
              <a-switch :disabled="!isEdit" :checked="!Boolean(queryParam.inspectionConfig)" @change="(val) => {changeStatus(val, 'inspectionConfig')}" />
            </div>
            <div>
              <span>蓝→橙</span>
              <a-switch :disabled="!isEdit" :checked="!Boolean(queryParam.inspectionReworkOrangeConfig)" @change="(val) => {changeStatus(val, 'inspectionReworkOrangeConfig')}" />
              当<a-input-number :disabled="!isEdit" :precision="0" size="small" v-model:value="queryParam.inspectionReworkOrangeHour" placeholder="请输入" :min="0" />小时内返工件数大于等于
              <a-input-number :disabled="!isEdit" :precision="0" size="small" v-model:value="queryParam.inspectionReworkOrangeNum" placeholder="请输入" :min="0" />件时
            </div>
            <div>
              <span>蓝、橙→红</span>
              <a-switch :disabled="!isEdit" :checked="!Boolean(queryParam.inspectionReworkRedConfig)" @change="(val) => {changeStatus(val, 'inspectionReworkRedConfig')}" />
              当<a-input-number :disabled="!isEdit" :precision="0" size="small" v-model:value="queryParam.inspectionReworkRedHour" placeholder="请输入" :min="0" />小时内返工件数大于等于
              <a-input-number :disabled="!isEdit" :precision="0" size="small" v-model:value="queryParam.inspectionReworkRedNum" placeholder="请输入" :min="0" />件时
            </div>
            <div>
              <span>橙、红→蓝</span>
              <a-switch :disabled="!isEdit" :checked="!Boolean(queryParam.inspectionReworkGreenConfig)" @change="(val) => {changeStatus(val, 'inspectionReworkGreenConfig')}" />
              当<a-input-number :disabled="!isEdit" :precision="0" size="small" v-model:value="queryParam.inspectionReworkGreenHour" placeholder="请输入" :min="0" />小时内返工件数小于等于
              <a-input-number :disabled="!isEdit" :precision="0" size="small" v-model:value="queryParam.inspectionReworkGreenNum" placeholder="请输入" :min="0" />件时
            </div>
            <div class="blue-line pt-10"><a name="7"></a>{{ $t('sysManage.otherSetting') }}</div>
            <div>
              <span>{{ $t('sysManage.hangerInfoKeepDataTime') }}</span>
              <a-select :disabled="!isEdit"
                v-model:value="queryParam.dataSaveTime"
                :placeholder="$t('common.pleaseSelect')"
                size="small"
                :options="timeList"
              ></a-select>
            </div>
            <div>
              <span>{{ $t('sysManage.interval') }}</span>
              <a-input-number :disabled="!isEdit"
                :precision="0"
                v-model:value="queryParam.timeInterval"
                :placeholder="$t('common.pleaseInput')"
                size="small"
                :min="0"
              />
              {{ $t('other.seconds') }}
            </div>
             <div>
              <span>{{ $t('sysManage.allowOverMax') }}</span>
              <a-input-number :disabled="!isEdit"
                :precision="0"
                v-model:value="queryParam.allowMaxOverproduction"
                :placeholder="$t('common.pleaseInput')"
                size="small"
                :min="0"
              />
              {{ $t('other.piece') }}
            </div>
            <div>
              <span>{{ $t('sysManage.dataSynIntervalTime') }}</span>
              <a-input-number :disabled="!isEdit"
                :precision="0"
                v-model:value="queryParam.dataSyncInterval"
                :placeholder="$t('common.pleaseInput')"
                size="small"
                :min="1"
              />
              {{ $t('common.minute') }}
            </div>
            <div>
              <span>{{ $t('sysManage.autoLock') }}</span>
              <a-select :disabled="!isEdit"
                v-model:value="queryParam.autoScreenLockTime"
                :placeholder="$t('common.pleaseSelect')"
                size="small"
                :options="lockTimeList"
              ></a-select>
            </div>
            <div>
              <span>{{ $t('sysManage.mapMode') }}</span>
              <a-radio-group v-model:value="queryParam.roadmapModel" :disabled="!isEdit">
                <a-radio :value="1">{{ $t('sysManage.routine') }}</a-radio>
                <a-radio :value="0">{{ $t('sysManage.simulate') }}</a-radio>
              </a-radio-group>
            </div>  
            <div>
              <span>{{ $t('other.productOptimizationReminder') }}</span>
              <a-switch :checked="!Boolean(queryParam.stopUndressing)" @change="(val) => {changeStatus(val, 'stopUndressing')}" :disabled="!isEdit"/>
              <b class="text-gray2 font-normal ml-10">{{ $t('other.optimizeDataSynchronizationIntervalInProduction') }}</b>
              <a-input-number :disabled="!isEdit"
                :precision="0"
                size="small"
                v-model:value="queryParam.optimizationInProductionDataSyncInterval"
                :placeholder="$t('common.pleaseInput')"
                :min="1"
              />{{ $t('common.minute') }}
            </div>
            <div>
              <span>{{ $t('other.reworkIntoWarehouse') }}</span>
              <a-switch :checked="!Boolean(queryParam.reworkReturnToDepot)" @change="(val) => {changeStatus(val, 'reworkReturnToDepot')}" :disabled="!isEdit"/>
            </div>
            <div>
              <span>站点登录配置</span> 
              <a-radio-group v-model:value="queryParam.stationLoginConfig" :disabled="!isEdit">
                <a-radio :value="1">单站位登录</a-radio>
                <a-radio :value="0">多站位登录</a-radio>
              </a-radio-group>
            </div>
            <div>
              <span>吊挂完成后进分拣</span>
              <a-switch :checked="Boolean(queryParam.sortingFinishedProductIn)" @change="(val) => {changeStatus(!val, 'sortingFinishedProductIn')}" :disabled="!isEdit"/>
              <a-select :disabled="!isEdit"
                class="ml-8"
                v-model:value="queryParam.sortingFinishedProductInCode"
                        :placeholder="$t('common.pleaseSelect')"
                size="small"
                :options="productInList"
              ></a-select>
            </div>
          </div>
        </div> 
      </div> 
    </a-spin>
  </div>
</template>
<script>
import axios from "@/utils/request";
import {message} from "ant-design-vue";
import { store } from "@/store"
export default {
  name: "paramConfig",
  data() {
    return {
      confirmLoading: false,
      queryParam: {},
      url: {
        detail: "/api/system/config/get",
        save: "/api/system/config/update",
        sync: "/api/system/iot/sync-cloud-data",
      },
      typeList: [
        { label: "优先回起始站", value: 1},
        { label: this.$t('other.equalDistribution'), value: 2 },
        { label: this.$t('other.backToTheStartingStation'), value: 3 },
        // { label: "动态分配(待定)", value: 2 },
      ],
      ruleList: [
        { label: this.$t('other.advancedHangingFilmStation'), value: 1},
        { label: this.$t('other.advancedEmptyHangerStorageStation'), value: 2 }
      ],
      timeList: [
        { label: this.$t('sysManage.permanSave'), value: 0 },
        { label: this.$t('sysManage.oneYear'), value: 1 },
        { label: this.$t('sysManage.halfYear'), value: 2 },
        { label: this.$t('sysManage.oneMonth'), value: 3 },
        { label: this.$t('sysManage.oneWeek'), value: 4 },
      ],
      lockTimeList: [
        { label: this.$t('sysManage.minu5'), value: 5 },
        { label: this.$t('sysManage.minu10'), value: 10 },
        { label: this.$t('sysManage.minu15'), value: 15 },
        { label: this.$t('sysManage.minu30'), value: 30 },
        { label: this.$t('sysManage.perman'), value: -1 },
      ],
      activeKey: 0,
      tabList: [
        {value: 1, label: this.$t('sysManage.hangSet')},
        {value: 2, label: this.$t('other.roadmapAllocationStrategy')},
        {value: 3, label: this.$t('other.reportConfiguration')},
        {value: 4, label: this.$t('sysManage.kanbanSit')},
        {value: 5, label: this.$t('sysManage.lightTips3')},
        {value: 6, label: '巡检配置'},
        {value: 7, label: this.$t('sysManage.otherSetting')},
      ],
      productInList: [ 
        {label: "大烫成品入库", value: '140'},
        {label: "复查成品入库", value: '150'},
        {label: "包装成品入库", value: '160'}
      ],
      isEnvLocal: process.env.VUE_APP_CONFIG == "local",
      showWebConfig: ["local", "online"].includes(process.env.VUE_APP_CONFIG),
      isEdit: false
    };
  },
  methods: {
    async getDetails() {
      this.confirmLoading = true;
      const res = await axios.getAction(this.url.detail, {});
      if (res.success) { 
        let params = { ...res.data };
        this.queryParam = params;
        localStorage.setItem( "autoScreenLockTime", Number(params.autoScreenLockTime) );
        localStorage.setItem( "sortingFinishedProductIn",  Number(params.sortingFinishedProductIn) );
        store.commit("updateState", { sortingFinishedProductIn: Number(params.sortingFinishedProductIn) });
      }
      this.confirmLoading = false;
    }, 
    changeStatus(value, name) {
      this.queryParam[name]= value ? 0 : 1;
    }, 
    async updateConfig() {
      this.confirmLoading = true;
      let params = { ...this.queryParam }
      const res = await axios.postAction(this.url.save, params);
      if (res.success) {
        this.$message.success(res.msg || this.$t('common.successTip'));
        this.isEdit = false
        localStorage.setItem("configuration", JSON.stringify(this.queryParam))
        store.commit("updateState", { configuration: this.queryParam })
        this.getDetails();
        store.commit("updateState", { isShowView: false });
        this.$nextTick(() => {
          store.commit("updateState", { isShowView: true });
        });
      } else {
        this.$message.warning(res.msg || this.$t('common.errorTip'));
      }

      this.confirmLoading = false;
    },
    goInspect() {
      this.$router.push('/sysManage/factoryInspectMode')
    },
    async syncData(){
      this.confirmLoading = true
      try {
        const res = await axios.getAction('/api/sync/start')
        this.confirmLoading = false
        if (res.success){
          message.success(this.$t('common.successTip'))
        }else{
          message.error(this.$t('common.doError'))
        }
      }catch (e) {
        this.confirmLoading = false
        console.log(e)
      }
    },
    toggleOpt(val) {
      this.isEdit = val
      // 刷新当前数据
      this.getDetails();
    }
  },
  created() {
    this.getDetails();
  },
};
</script>
